<template>
  <Base
    :class="[$attrs.class, classNames?.root || classNames?.card]"
    :style="styles?.root || styles?.card"
    :size="size"
    v-bind="$attrs"
  >
    <Header
      v-if="$slots.title || $slots.extra"
      :status-type="statusType"
      :class="classNames?.header"
      :style="styles?.header"
    >
      <template #title><slot name="title" /></template>
      <template #extra><slot name="extra" /></template>
    </Header>

    <Cover v-if="$slots.cover" :class="classNames?.cover" :style="styles?.cover">
      <slot name="cover" />
    </Cover>

    <Body v-if="$slots.default" :class="classNames?.body" :style="styles?.body">
      <slot />
    </Body>

    <Footer v-if="$slots.footer" :class="classNames?.footer" :style="styles?.footer">
      <slot name="footer" />
    </Footer>
  </Base>
</template>

<script setup>
import Base from './base.vue';
import Header from './header.vue';
import Cover from './cover.vue';
import Body from './body.vue';
import Footer from './footer.vue';

const props = defineProps({
  size: String,
  statusType: String,
  classNames: {
    type: Object,
    default: () => ({}),
  },
  styles: {
    type: Object,
    default: () => ({}),
  },
});
</script>
